<template>
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" class="datalist">
        <van-cell class="listcell" v-for="item, index in list" :key="index" @click="mas(item.proid)">
            <template #title>
                <img :src="item.img1" alt="">
            </template>
            <template #value>
                <p class="p">{{ item.proname }}</p>
            </template>
        </van-cell>

    </van-list>


</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { shangPin } from "../api/index";
import { useRouter } from "vue-router";
const router = useRouter()

const list = ref([] as any);
const loading = ref(false);
const finished = ref(false);
const act = ref(2)

const mas = (id: string) => {
    router.push(`/xiangqing/${id}`)

}

const onLoad = () => {
    shangPin(act.value, 10).then((result) => {
        list.value.push(...result.data.data);
        console.log(result.data.data);

        act.value++;
        loading.value = false;
        // console.log(loading.value);
        // console.log(act.value);
        if (result.data.data.length == 0) {
            finished.value = true;
        }


    })
};
onMounted(async () => {
    const result = await shangPin(1, 10)
    console.log(result.data.data);
    list.value = result.data.data
})


</script>

<style scoped>
.datalist {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly
}

.listcell {
    display: flex;
    flex-direction: column;
    width: 45%;
    align-items: center;
    margin: 5px;
}

img {
    width: 100px;
}

.p {
    text-align: center;
}
</style>


















[1,2,3,4].push([5])
[1,2,3,4,[1,2,3,4]]